<template>
	<view class="content">
		<view class="topSection">
			<image src="../../static/images/top.png" class="topImg"></image>
			<view class="title">
				双凤镇企业服务中心--云客厅
				<!-- {{time}} -->
				</view>
			<image src="../../static/images/search2.png" class="searchImg"></image>
			<uni-easyinput class="searchInput" suffixIcon="search" 
			v-model="value" placeholder="请输入关键词搜索" @iconClick="toSearch"></uni-easyinput>
			<view class="searchText">
				地址：双凤镇凤北路251号二楼双凤镇企业服务中心 <br />
				联系电话：53991717
			</view>
		</view>
		<view class="btns">
			<view class="btn" @tap="toForm">
				<image src="../../static/images/suqiu.png" mode="widthFix" class="btn1"></image>
				<view class="">诉求直通</view>
			</view>
			<view class="btn" @tap="toGuide">
				<image src="../../static/images/zhengce.png" mode="widthFix" class="btn1"></image>
				<view class="">政策导览</view>
			</view>
			<view class="btn" @tap="toActivity">
				<image src="../../static/images/fuwu.png" mode="widthFix" class="btn1"></image>
				<view class="">热点资讯</view>
			</view>
			<view class="btn" @tap="openPDF">
				<image src="../../static/images/banshi.png" mode="widthFix" class="btn1"></image>
				<view class="">办事指南</view>
			</view>		
		</view>
		
		<view class="fonts">
			<image src="@/static/images/bottom.png" class="bottomImg"></image>
			<view class="line1">
				<image :animation="animationData1" src="@/static/images/font/line1_1.png" mode="heightFix" class="line1_1"></image>
				<image :animation="animationData2" src="@/static/images/font/line1_2.png" mode="heightFix" class="line1_2"></image>
				<image :animation="animationData3" src="@/static/images/font/line1_3.png" mode="heightFix" class="line1_3"></image>
				<image :animation="animationData4" src="@/static/images/font/line1_4.png" mode="heightFix" class="line1_4"></image>
				<image :animation="animationData5" src="@/static/images/font/line1_5.png" mode="heightFix" class="line1_5"></image>
				<image :animation="animationData6" src="@/static/images/font/line1_6.png" mode="heightFix" class="line1_6"></image>
				<image :animation="animationData7" src="@/static/images/font/line1_7.png" mode="heightFix" class="line1_7"></image>
				
			</view>
			<view class="line2">
				<image :animation="animationData8" src="@/static/images/font/line1_8.png" mode="heightFix" class="line1_8"></image>
				<image :animation="animationData9" src="@/static/images/font/line1_9.png" mode="heightFix" class="line1_9"></image>
				<image :animation="animationData10" src="@/static/images/font/line1_10.png" mode="heightFix" class="line1_10"></image>
				<image :animation="animationData11" src="@/static/images/font/line1_11.png" mode="heightFix" class="line1_11"></image>
				<image :animation="animationData12" src="@/static/images/font/line1_12.png" mode="heightFix" class="line1_12"></image>
				
				<image :animation="animationData13" src="@/static/images/font/line2_1.png" mode="heightFix" class="line2_1"></image>
				<image :animation="animationData14" src="@/static/images/font/line2_2.png" mode="heightFix" class="line2_2"></image>
				<image :animation="animationData15" src="@/static/images/font/line2_3.png" mode="heightFix" class="line2_3"></image>
				<image :animation="animationData16" src="@/static/images/font/line2_4.png" mode="heightFix" class="line2_4"></image>
			</view>
			<view class="line3">
				<image :animation="animationData17" src="@/static/images/font/line3_1.png" mode="heightFix" class="line3_1"></image>
				<image :animation="animationData18" src="@/static/images/font/line3_2.png" mode="heightFix" class="line3_2"></image>
				<image :animation="animationData19" src="@/static/images/font/line3_3.png" mode="heightFix" class="line3_3"></image>
				<image :animation="animationData20" src="@/static/images/font/line3_4.png" mode="heightFix" class="line3_4"></image>
				<image :animation="animationData21" src="@/static/images/font/line3_5.png" mode="heightFix" class="line3_5"></image>
				<image :animation="animationData22" src="@/static/images/font/line3_6.png" mode="heightFix" class="line3_6"></image>
				<image :animation="animationData23" src="@/static/images/font/line3_7.png" mode="heightFix" class="line3_7"></image>
				<image :animation="animationData24" src="@/static/images/font/line3_8.png" mode="heightFix" class="line3_8"></image>
				<image :animation="animationData25" src="@/static/images/font/line3_9.png" mode="heightFix" class="line3_9"></image>
				<image :animation="animationData26" src="@/static/images/font/line3_10.png" mode="heightFix" class="line3_10"></image>
				<image :animation="animationData27" src="@/static/images/font/line3_11.png" mode="heightFix" class="line3_11"></image>
				<image :animation="animationData28" src="@/static/images/font/line3_12.png" mode="heightFix" class="line3_12"></image>
				<image :animation="animationData29" src="@/static/images/font/line3_13.png" mode="heightFix" class="line3_13"></image>
				<image :animation="animationData30" src="@/static/images/font/line3_14.png" mode="heightFix" class="line3_14"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				value: '',
				animationData1: {},
				animationData2: {},
				animationData3: {},
				animationData4: {},
				animationData5: {},
				animationData6: {},
				animationData7: {},
				animationData8: {},
				animationData9: {},
				animationData10: {},
				animationData11: {},
				animationData12: {},
				animationData13: {},
				animationData14: {},
				animationData15: {},
				animationData16: {},
				animationData17: {},
				animationData18: {},
				animationData19: {},
				animationData20: {},
				animationData21: {},
				animationData22: {},
				animationData23: {},
				animationData24: {},
				animationData25: {},
				animationData26: {},
				animationData27: {},
				animationData28: {},
				animationData29: {},
				animationData30: {},
				time: ''
			}
		},
		onLoad() {
			this.fontAnimation()
			setInterval(() => {
				this.fontAnimation()
			}, 18000)		
			// this.time = new Date()
			uni.request({
				url: '/sf_enterprise_service/business/page_views/add',
				method: 'GET',
				success: (res) => {		
					console.log('请求成功')
				},
			})
				
		},
		methods: {
			fontAnimation() {
				for(let i = 0; i <= 30; i++) {
					setTimeout(() => {
						let animation = uni.createAnimation({
						    duration: 300,
							timingFunction: 'ease',
							delay: 300,
						})		
						this['animation' + i] = animation		
						animation.translate(0,-10).step()
						animation.translate(0,0).step()
						this['animationData' + i] = animation.export()	
					}, 600 * (i-1))
					
				}
			},
			toForm() {
				uni.navigateTo({
					url: '/pages/form/requestForm'
				})
			},
			toGuide() {
				uni.navigateTo({
					url: '/pages/policeGuide/guideType'
				})
			},
			toActivity() {
				uni.navigateTo({
					url: '/pages/activity/activity'
				})
			},
			toSearch() {					
				if(this.value) {
					uni.navigateTo({
						url: '/pages/searchList/searchList?value=' + this.value,
					})					
				} else {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none'
					})
				}
				
			},
			openPDF() {
				uni.navigateTo({
					url: '/pages/webView/webView'
				})
				return
				console.log('yyyy')
				uni.downloadFile({
				  url: 'http://192.168.1.251:6050/sf_enterprise_service/data/test.pdf',
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
					  fileType: 'pdf',
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      },
					  fail(res) {
						  console.log(res, ',,,,,')
					  }
				    });
				  }
				});

			},
		}
	}
</script>
<style>
	uni-page-body {
		display: inline-block !important;
		height: 100% !important;
	}
</style>
<style scoped>	
	.content {
		position: relative;		
		/* height: calc(100vh -50px); */
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: hidden !important;
		/* border: 1px solid green; */
	}
	.topSection {		
		height: 35vh;
		/* border: 1px solid red; */
		position: relative;		
		flex-shrink: 1;
	}
	.topImg {
		width: 100%;
		height: 100%;
		z-index: 1;
		position: absolute;
	}
	.title {
		height: 50px;
		line-height: 50px;
		color: #fff;
		font-weight: bold;
		text-align: center;
		position: relative;
		z-index: 2;
	}
	.searchImg {
		width: 100%;
		height: calc(100% - 50px);
		z-index: 1;
		position: absolute;
	}
	.searchInput {
		z-index: 2;
		position: relative;
		top: 12vh;
		width: 90%;
		margin: 0 auto;
		.is-input-border {
			border-radius: 24px;
		}
		.uni-easyinput__content-input {
			padding-left: 15px !important;
		}
	}
	.searchText {
		z-index: 2;
		position: relative;
		top: 14vh;
		color: rgba(255,255,255,0.8);
		font-size: 22rpx;
		text-align: center;
	}
	.btns {
		height: 20vh;
		/* border: 1px solid green; */
		z-index: 2;
		display: flex;
		justify-content: space-around;
		flex-shrink: 1;
	}
	.btn {
		/* border: 1px solid blue; */
		width: 20vw;
		font-size: 28rpx;
		color: gray;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.btn image {
		width: 15vw;
		margin-bottom: 6rpx;
	}
	.bottomImg {
		width: 100%;
		height: 45vh;
		position: absolute;
		/* border: 1px solid green; */
	}
	.fonts{
		/* border: 1px solid red; */
		width: 100%;
		/* position: fixed; */
		height: 45vh;
		/* bottom: 0; */
		z-index: 1;
		box-sizing: border-box;
		height: 38vh;
		flex-shrink: 1;
	}
	.line1,
	.line2,
	.line3{
		height: 6vh;
		/* border: 1px solid red; */
		display: flex;
		align-items: center;		
		justify-content: center;
	}	
	.line1 image,
	.line2 image,
	.line3 image {
		height: 40px;
		position: relative;
		top: 5vh;
	}
	.line1_8,
	.line1_9,
	.line1_10,
	.line1_11,
	.line1_12{
		left: 10px;
	}
	.line2 {
		height: 7vh;
	}
	.line2_1,
	.line2_2,
	.line2_3,
	.line2_4{
		left: 10px;
		/* height: 30px !important;
		margin-top: 5px; */
	}
	.line3 {
		height: 4vh;
	}
	.line3_7,
	.line3_8,
	.line3_9,
	.line3_10,
	.line3_11,
	.line3_12,
	.line3_13,
	.line3_14{
		left: 10px;
	}
		
	
</style>
